
import React from 'react';
import { 
  Heart, 
  Activity, 
  Utensils, 
  Droplet, 
  Weight, 
  Wine, 
  BedDouble, 
  BarChart3 
} from 'lucide-react';
import DashboardCard from '@/components/DashboardCard';
import { useInView } from '@/utils/animation';
import { useIsMobile } from '@/hooks/use-mobile';

const Index = () => {
  const isMobile = useIsMobile();
  const { ref: headerRef, isInView: headerIsVisible } = useInView();
  const { ref: progressRef, isInView: progressIsVisible } = useInView(0.1);
  const { ref: cardsRef, isInView: cardsAreVisible } = useInView(0.1);

  // Health metrics data
  const healthMetrics = [
    { 
      title: '体重管理',
      icon: <Weight className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)',
      currentValue: '65.2',
      unit: 'kg',
      change: '-1.3',
      status: 'positive'
    },
    { 
      title: '血压监测',
      icon: <Droplet className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)',
      currentValue: '120/80',
      unit: 'mmHg',
      change: '-5/3',
      status: 'positive'
    },
    { 
      title: '心率监测',
      icon: <Heart className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)',
      currentValue: '72',
      unit: 'bpm',
      change: '0',
      status: 'neutral'
    },
    { 
      title: '饮食记录',
      icon: <Utensils className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #FBBF24 0%, #FCD34D 100%)',
      currentValue: '1650',
      unit: 'kcal',
      change: '-120',
      status: 'positive'
    },
    { 
      title: '步数统计',
      icon: <Activity className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #60A5FA 0%, #93C5FD 100%)',
      currentValue: '8,452',
      unit: '步',
      change: '+1,245',
      status: 'positive'
    },
    { 
      title: '饮水量',
      icon: <Droplet className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #4FD1C5 0%, #63B3ED 100%)',
      currentValue: '1.5',
      unit: 'L',
      change: '+0.2',
      status: 'positive'
    },
    { 
      title: '睡眠质量',
      icon: <BedDouble className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #A78BFA 0%, #C4B5FD 100%)',
      currentValue: '7.5',
      unit: '小时',
      change: '+0.5',
      status: 'positive'
    },
    { 
      title: '酒精摄入',
      icon: <Wine className="h-6 w-6" />,
      gradient: 'linear-gradient(120deg, #F87171 0%, #FCA5A5 100%)',
      currentValue: '0',
      unit: '单位',
      change: '0',
      status: 'neutral'
    },
  ];

  return (
    <div className={`min-h-screen ${isMobile ? '' : 'pt-20'} px-6 md:px-10 pb-10`}>
      {/* Header Section */}
      <section 
        ref={headerRef}
        className={`max-w-7xl mx-auto mb-12 transition-all duration-700 delay-100 ${
          headerIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="text-center">
          <span className="inline-block bg-primary/10 text-primary px-4 py-1.5 rounded-full text-sm font-medium mb-4">
            健康管理
          </span>
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            全面追踪您的健康指标
          </h1>
          <p className="text-foreground/70 max-w-2xl mx-auto">
            记录和分析您的健康数据，获取个性化的健康建议，保持最佳状态
          </p>
        </div>
      </section>

      {/* Health Progress */}
      <section 
        ref={progressRef}
        className={`max-w-7xl mx-auto mb-10 transition-all duration-700 delay-150 ${
          progressIsVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <div className="glass-card rounded-xl p-6">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
            <div>
              <h2 className="text-xl font-semibold mb-1">今日健康进度</h2>
              <p className="text-foreground/70">您今天的健康目标已完成 65%</p>
            </div>
            <div className="mt-4 md:mt-0 flex gap-2">
              <button className="text-sm bg-white hover:bg-white/80 border border-border px-3 py-1 rounded-full transition-colors">
                自定义目标
              </button>
              <button className="text-sm bg-primary text-white px-3 py-1 rounded-full hover:bg-primary/90 transition-colors">
                添加数据
              </button>
            </div>
          </div>
          
          <div className="w-full bg-muted rounded-full h-3 mb-6">
            <div className="bg-primary h-full rounded-full" style={{ width: '65%' }}></div>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-dopamine-teal/20 flex items-center justify-center mr-3">
                <Activity className="h-5 w-5 text-dopamine-teal" />
              </div>
              <div>
                <p className="text-foreground/70 text-sm">步数目标</p>
                <p className="font-semibold">8,452 / 10,000</p>
              </div>
            </div>
            
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-dopamine-purple/20 flex items-center justify-center mr-3">
                <Droplet className="h-5 w-5 text-dopamine-purple" />
              </div>
              <div>
                <p className="text-foreground/70 text-sm">饮水目标</p>
                <p className="font-semibold">1.5 / 2.5 L</p>
              </div>
            </div>
            
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-dopamine-coral/20 flex items-center justify-center mr-3">
                <Utensils className="h-5 w-5 text-dopamine-coral" />
              </div>
              <div>
                <p className="text-foreground/70 text-sm">卡路里目标</p>
                <p className="font-semibold">1650 / 1800 kcal</p>
              </div>
            </div>
            
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-dopamine-blue/20 flex items-center justify-center mr-3">
                <BedDouble className="h-5 w-5 text-dopamine-blue" />
              </div>
              <div>
                <p className="text-foreground/70 text-sm">睡眠目标</p>
                <p className="font-semibold">7.5 / 8 小时</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Health Metrics Grid */}
      <section 
        ref={cardsRef}
        className={`max-w-7xl mx-auto transition-all duration-700 delay-200 ${
          cardsAreVisible ? 'opacity-100' : 'opacity-0 translate-y-10'
        }`}
      >
        <h2 className="text-2xl font-semibold mb-6">健康指标</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {healthMetrics.map((metric, index) => (
            <DashboardCard
              key={metric.title}
              title={metric.title}
              icon={metric.icon}
              gradient={metric.gradient}
              className={`transition-all duration-500 delay-${index * 50}`}
            >
              <div className="mt-4">
                <div className="flex items-end">
                  <span className="text-3xl font-bold">{metric.currentValue}</span>
                  <span className="text-foreground/70 ml-1">{metric.unit}</span>
                </div>
                
                <div className="flex items-center mt-2">
                  <span 
                    className={`text-sm font-medium ${
                      metric.status === 'positive' ? 'text-green-500' : 
                      metric.status === 'negative' ? 'text-red-500' : 
                      'text-foreground/70'
                    }`}
                  >
                    {metric.change.startsWith('+') ? metric.change : metric.change.startsWith('-') ? metric.change : `±${metric.change}`}
                    {metric.unit}
                  </span>
                  <span className="text-foreground/50 text-sm ml-1">vs 上周</span>
                </div>
              </div>
            </DashboardCard>
          ))}
        </div>
      </section>

      {/* Health Charts */}
      <section className="max-w-7xl mx-auto mt-16">
        <div className="glass-card rounded-xl p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold">健康趋势分析</h2>
            <div className="flex gap-2">
              <button className="text-sm bg-white/70 hover:bg-white px-3 py-1 rounded-full transition-colors">
                周
              </button>
              <button className="text-sm bg-primary text-white px-3 py-1 rounded-full">
                月
              </button>
              <button className="text-sm bg-white/70 hover:bg-white px-3 py-1 rounded-full transition-colors">
                年
              </button>
            </div>
          </div>
          <div className="h-80 flex items-center justify-center">
            <div className="text-center">
              <BarChart3 className="h-10 w-10 text-muted-foreground mx-auto mb-2" />
              <p className="text-muted-foreground">载入您的数据以查看详细健康趋势图表</p>
              <button className="mt-4 text-primary font-medium">连接健康设备</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Index;
